<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>基于jquery的垂直菜单特效</title>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/admin/js/jquery-2.2.2.min.js"></script>
<script type="text/javascript">
	$(document).ready(
			function() {
				$("#firstpane .menu_body:eq(0)").show();
				$("#firstpane h3.menu_head").click(
						function() {
							$(this).addClass("current").next("div.menu_body")
									.slideToggle(300).siblings("div.menu_body")
									.slideUp("slow");
							$(this).siblings().removeClass("current");
						});
				$("#secondpane .menu_body:eq(0)").show();
				$("#secondpane h3.menu_head").mouseover(
						function() {
							$(this).addClass("current").next("div.menu_body")
									.slideDown(500).siblings("div.menu_body")
									.slideUp("slow");
							$(this).siblings().removeClass("current");
						});
			});
</script>

<style type="text/css">
.menu_list {
	width: 268px;
	margin: 0 auto;
}

.menu_head {
	height: 47px;
	line-height: 47px;
	padding-left: 38px;
	font-size: 14px;
	color: #525252;
	cursor: pointer;
	border-left: 1px solid #e1e1e1;
	border-right: 1px solid #e1e1e1;
	border-bottom: 1px solid #e1e1e1;
	border-top: 1px solid #F1F1F1;
	position: relative;
	margin: 0px;
	font-weight: bold;
	background: #f1f1f1 url(images/pro_left.png) center right no-repeat;
}

.menu_list .current {
	background: #f1f1f1 url(images/pro_down.png) center right no-repeat;
}

.menu_body {
	line-height: 38px;
	border-left: 1px solid #e1e1e1;
	backguound: #fff;
	border-right: 1px solid #e1e1e1;
}

.menu_body a {
	display: block;
	height: 38px;
	line-height: 38px;
	padding-left: 38px;
	color: #777777;
	background: #fff;
	text-decoration: none;
	border-bottom: 1px solid #e1e1e1;
}

.menu_body a:hover {
	text-decoration: none;
}
</style>
</head>
<body>
	<div id="firstpane" class="menu_list">
		<h3 class="menu_head">数据管理</h3>
		<div style="display: none;" class="menu_body">
			<a href="${pageContext.request.contextPath }/admin/provincelist.do"
				target="main">各省管理</a> 
			<a href="${pageContext.request.contextPath }/admin/citylist.do"
				target="main">各市管理</a>
			<a href="${pageContext.request.contextPath }/admin/arealist.do"
				target="main">各区管理</a>
			<a href="${pageContext.request.contextPath }/admin/productlist.do"
				target="main">产品管理</a>
			<a href="${pageContext.request.contextPath }/admin/photolist.do"
				target="main">图片管理</a>
			<a href="${pageContext.request.contextPath }/admin/logout.do"
				target="_parent">注销</a>
		</div>
	</div>
</body>
</html>